<!--
 * @Author: your name
 * @Date: 2020-11-16 18:07:00
 * @LastEditTime: 2020-11-16 20:42:47
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \H5 2010 studyd:\H5 2010 练习\第二阶段\DAY 16\tab栏创建加切换.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 800px;
            height: 600px;
            margin: 100px auto;
        }

        ul,
        ol {
            list-style: none;
        }

        ul {
            width: 100%;
            height: 80px;
            display: flex;
        }

        ul li {
            flex: 1;
            height: 80px;
            line-height: 80px;
            text-align: center;
            background-color: #ccc;
        }

        ul li.active {
            background-color: orange;
        }

        ol {
            height: 520px;
            position: relative;
        }

        ol li {
            position: absolute;
            height: 520px;
            line-height: 520px;
            text-align: center;
            background-color: deepskyblue;
            width: 100%;
            height: 100%;
        }

        ol li.active {
            z-index: 1;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
        </ul>
        <ol>
        </ol>
    </div>

    <div class="box">
        <ul>
        </ul>
        <ol>
        </ol>
    </div>

    <div class="box">
        <ul>
        </ul>
        <ol>
        </ol>
    </div>

</body>

<script src="tab.js"></script>
<script>
    const box = document.querySelectorAll('.box')[0]
    const box1 = document.querySelectorAll('.box')[1]
    const box2 = document.querySelectorAll('.box')[2]
    // console.log(box)

    new Tab({
        data:['桐生一马','真岛吾朗','冴岛大河','锦山彰'],
        box:box
    })

    new Tab({
        box:box1
    })

    new Tab({
        data:['堂岛之龙','嶋野的狂犬','近江的黄龙'],
        box:box2
    })
</script>
</html>